<template>
  <div>
    <Modal
      @on-cancel="取消"
      @on-ok="queDindClick"
      width="880"
      v-model="isShow"
      :closable="false"
      :mask-closable="false"
    >
      <div
        v-if="isQuanXuan"
        slot="header"
        style="display: flex; align-items: center; justify-content: space-between"
      >
        <span style="font-size: 18px; font-weight: bold">{{ titleStr }}</span>
        <div style="display: flex; align-items: center">
          <Input
            suffix="ios-search"
            :clearable="false"
            v-model="searchValue"
            @on-change="searchInput"
            placeholder=""
            style="width: auto"
          />
          <Checkbox style="margin-left: 20px" v-model="single" @on-change="quanXuanClick"
            >全选</Checkbox
          >
        </div>
      </div>
      <div>
        <row>
          <Col span="24">
            <div style="overflow: auto; height: 400px">
              <CheckboxGroup
                v-if="suaXinBoll"
                @on-change="checkAllGroupChange"
                v-model="duoXuanlist"
              >
                <Checkbox
                  :key="index"
                  style="width: 190px"
                  :label="item.id"
                  border
                  class="ivu-m-8 checkBoxText"
                  v-for="(item, index) in jitaiList"
                  >{{ item.name }}
                </Checkbox>
              </CheckboxGroup>
            </div>
          </Col>
        </row>
      </div>
    </Modal>
  </div>
</template>
<script>
  export default {
    name: 'jiTaiModel',
    props: {
      titleStr: {
        type: String,
        default: '列表选择'
      },
      list: {
        type: Array
      }
    },
    watch: {
      list: {
        handler(newValue) {
          this.duoXuanListCopy = JSON.parse(JSON.stringify(newValue))
          this.jitaiList = newValue
          for (let value of this.jitaiList) {
            this.duoXuanlist.push(value.id)
          }
          this.queDindClick()
        },
        deep: true,
        immediate: true
      }
    },
    data() {
      return {
        suaXinBoll: true,
        searchValue: '',
        jitaiList: [],
        duoXuanlist: [],
        duoXuanListCopy: [],
        single: true,
        isShow: false,
        isQuanXuan: true,
        endTsid: null,
        startTsid: null
      }
    },
    mounted() {},
    methods: {
      show() {
        this.isShow = true
      },
      moRenSelect(ids) {
        this.single = false
        this.duoXuanlist = ids
      },
      checkAllGroupChange(item) {
        if (item.length != this.jitaiList.length) {
          this.single = false
        } else {
          this.single = true
        }
        this.duoXuanlist = item
      },
      quanXuanClick(val) {
        if (val) {
          this.duoXuanlist = this.jitaiList.map((value) => {
            return value.id
            this.single = true
          })
        } else {
          this.single = false
          this.duoXuanlist = []
        }
      },
      //搜素框变化时调用
      searchInput() {
        this.suaXinBoll = false
        this.checkAllGroup = []
        this.jitaiList = []
        this.single = false
        if (
          this.searchValue === '' ||
          this.searchValue === null ||
          this.searchValue === undefined
        ) {
          this.jitaiList = JSON.parse(JSON.stringify(this.duoXuanListCopy))
        } else {
          let arr = this.duoXuanListCopy.filter((value2) => {
            return value2.name.toLowerCase().includes(this.searchValue.toLowerCase())
          })
          this.jitaiList.push(...arr)
        }
        let _this = this
        setTimeout(function () {
          _this.suaXinBoll = true
        }, 500)
      },
      //确定点击事件
      queDindClick() {
        let idArr = []
        for (let item of this.jitaiList) {
          if (this.duoXuanlist.includes(item.id)) {
            idArr.push(item.name)
          }
        }
        let jitaiArr = idArr.join(',')
        this.$emit('duoXuanlClick', this.duoXuanlist, jitaiArr, this.jitaiList)
      }
    }
  }
</script>
<style lang="scss">
  .checkBoxText {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
